import React from 'react';
import { Form, Row, Col, Input, DatePicker, Select, Pagination, Table, Checkbox, message } from 'antd';
import { Link } from 'react-router';
import $ from 'jquery';
import Config from '../../../common/config';
import moment from 'moment';

const FormItem = Form.Item;
const Option = Select.Option;
const config = new Config();
const InputGroup = Input.Group;
const { RangePicker } = DatePicker;
const token = sessionStorage.getItem('token');

class PrintOutboundOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      outboundOrderData: [], // 出库单数据
    }
  }

  componentDidMount() {
    const orderList = (this.props.params.orderList).split(',');
    const userInfo = JSON.parse(sessionStorage.getItem('UserInfo'));
    $.ajax({
      url: `${config.CrmOrder}/getOutboundOrder`,
      type: 'post',
      headers: {
        'Authorization': 'Bearer ' + token,
      },
      data: {
        id: userInfo.id,
        orderList
      },
      success: res => {
        console.log('出库单预览数据', res);
        if (res.code === 200) {
          res.data.map((item, index) => {
            item.productList && item.productList.map((value, key) => {
              value.key = index;
            });
          });
          this.setState({
            outboundOrderData: res.data
          }, () => {
            window.print();
            window.close();
          });
        }
      }
    });
  }

  // 出库单预览的表头
  outboundOrderPreviewColumns() {
    return [{
      title: '编号',
      dataIndex: 'productId',
      width: '15%',
    }, {
      title: '产品',
      dataIndex: 'productName',
      width: '55%',
    }, {
      title: '数量',
      dataIndex: 'number',
      width: '15%',
    }, {
      title: '单位',
      dataIndex: 'packing',
      width: '15%',
    }];
  }

  render() {
    return <div>
      {
        this.state.outboundOrderData.map((item, index) => {
          return <div key={index} className='delets_piangt'>
            <div className='delets_piangt-a'>
              <Row>
                <Col span={24}><p className='delets_piangt-1'>{item.day}</p></Col>
              </Row>
              <Row>
                <Col span={24}><p className='delets_piangt-2'>出库证明</p></Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={12}><p className='delets_piangt-3'><span>售后微信：</span>laozy995</p></Col>
                <Col span={12}><p className='delets_piangt-3'><span>售后电话：</span>073183992867</p></Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={12}><p className='delets_piangt-3'><span>顾客姓名：</span>{item.userName}</p></Col>
                <Col span={12}><p className='delets_piangt-3'><span>包裹编号：</span>No.{item.parcelNumber}</p></Col>
              </Row>
              <Row style={{ marginBottom: 5 }}>
                <Col span={12}><p className='delets_piangt-3'><span>联系电话：</span>{item.consigneePhone}</p></Col>
                <Col span={12}><p className='delets_piangt-3'><span>日期：</span>{item.date}</p></Col>
              </Row>
              <Row style={{ marginTop: 15 }}>
                <Table
                  columns={this.outboundOrderPreviewColumns()}
                  dataSource={item.productList}
                  pagination={false}
                  bordered
                />
              </Row>
              <Row style={{ marginTop: 10 }}>
                <p className='delets_piangt-4'>套餐总价：  {item.orderMoney} 元</p>
              </Row>
            </div>
          </div>
        })
      }
    </div>
  }
}

export default PrintOutboundOrder;
